<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>test</title>
    <style>
        .picutre_many img{width:200px; height:150px;}
    </style>
</head>
<body>
<div id="list" class=" picutre_many"
     style="overflow: hidden; height: 150px; width: 100%; margin: 0 auto;">
    <table cellspacing="0" cellpadding="0"
           style="width: 680px; border: 2px;">
        <tr>
            <td id="list1">
                <table style="border: 0px;" cellpadding="0" cellspacing="0">
                    <tr id="pic">
                        <td><img  id="pic1"     /></td>
                        <td><img  id="pic2"   /></td>
                        <td><img  id="pic3"   /></td>
                        <td><img  id="pic4"    /></td>
                        <td><img  id="pic5"   /></td>
                        <td><img  id="pic6"   /></td>
                        <!--<td><img style="border: 0px;" alt="" src="img/dummies/t-p-3.jpg" /></td>-->
                        <!--<td><img style="border: 0px;" alt="" src="img/dummies/t-land-3.jpg" /></td>-->
                        <!--<td><img style="border: 0px;" alt="" src="img/dummies/t-bw-2.jpg" /></td>-->
                        <!--<td><img style="border: 0px;" alt="" src="img/dummies/t-land-3.jpg" /></td>-->
                    </tr>
                </table>
            </td>
            <td id="list2"></td>
        </tr>
    </table>
</div>
<script type="text/javascript">

    var  url = "img/dummies/t-land-3.jpg";

    document.getElementById("pic1").src = url;
    document.getElementById("pic2").src = url;
    document.getElementById("pic3").src = url;
    document.getElementById("pic4").src = url;
    document.getElementById("pic5").src = url;



</script>

<script type="text/javascript">
    /*图片滚动效果*/
    var speedpic = 20;//速度数值越大速度越慢
    document.getElementById("list2").innerHTML = document.getElementById("list1").innerHTML;
    function Marqueepic() {
        if (document.getElementById("list2").offsetWidth
            - document.getElementById("list").scrollLeft <= 0) {
            document.getElementById("list").scrollLeft -= document
                .getElementById("list1").offsetWidth;
        } else {
            document.getElementById("list").scrollLeft++;
        }
    }
    var MyMarpic = setInterval(Marqueepic, speedpic);

    document.getElementById("list").onmouseover = function() {
        clearInterval(MyMarpic);
    }
    document.getElementById("list").onmouseout = function() {
        MyMarpic = setInterval(Marqueepic, speedpic);
    }
</script>
</body>
</html>